<script setup lang="ts">
import StIcon from "@/components/st-icon/index.vue";
</script>

<template>
  <!-- 自定义输入框组件 -->
  <view class="st-input">
    <!-- 左侧图标 -->
    <view class="st-input__left-icon">
      <slot name="left-icon"></slot>
    </view>
    <!-- 输入框内容区域 -->
    <view class="st-input__content">
      <!-- 输入框 -->
      <view class="st-input__content-input">
        <!-- 输入框 -->
        <input class="ipt" type="text" name="" id="">
        <!-- placeholder -->
        <view class="placeholder">
          placeholder
        </view>
      </view>
    </view>
    <!-- 右侧图标 -->
    <view class="st-input__right-icon">
      <slot name="right-icon">
        <view>
          <!-- 密码显示图标 -->
          <slot name="show-icon">
            <StIcon icon-name="EyeOutline"></StIcon>
          </slot>
          <!-- 密码隐藏图标 -->
          <slot name="hide-icon">
            <StIcon icon-name="EyeClosedOutline"></StIcon>
          </slot>
        </view>
        <!-- 输入清除图标 -->
        <slot name="clear-icon">
          <StIcon icon-name="Clear"></StIcon>
        </slot>
      </slot>
    </view>
  </view>
</template>

<style scoped lang="scss">
// 自定义输入框组件
.st-input {
  display: flex;
  justify-content: start;
  align-items: center;

  // 输入框内容区域
  .st-input__content {
    flex: 1;

    .st-input__content-input {
      position: relative;

      .ipt .uni-input-input:focus ~ .placeholder {
        color: #4cd964;
      }
      
      .placeholder {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
        pointer-events: none;
      }
    }
  }

  .st-input__right-icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>